<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="can" width="1100px" height="600px" ></canvas>	
		</div>
		<script>
			var div=document.getElementById("div");
			var z=1;
			ctx=document.getElementById("can").getContext('2d');
			ctx.translate(100,300);
			
			ctx.beginPath();
			ctx.moveTo(0,0);	
			setInterval(function(){
			ctx.clearRect(-100,-300,1200,600)
			z++;
			ctx.save();
			ctx.strokeStyle='black';
			ctx.stroke();
			ctx.lineTo(z*Math.PI/180*20,Math.sin(z*Math.PI/180)*200)
			ctx.restore();
			ctx.fillRect(z*Math.PI/180*20,Math.sin(z*Math.PI/180)*200,50,50)
			ctx.fillStyle='red';
			},5)
			
		</script>
	</body>
</html>
